import { AppDocSectionText } from '@/components/doc/app.docsectiontext';
import { Component } from '@angular/core';

@Component({
    selector: 'reference-doc',
    standalone: true,
    imports: [AppDocSectionText],
    template: `
        <app-docsectiontext>
            <p>List of class names of the CSS animations used by the components.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Component</th>
                            <th>Enter Class</th>
                            <th>Leave Class</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <i>Accordion</i>
                            </td>
                            <td>.p-collapsible-enter-active</td>
                            <td>.p-collapsible-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>AutoComplete</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>CascadeSelect</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>ColorPicker</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>ConfirmPopup</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>ContextMenu</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>DatePicker</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Dialog</i>
                            </td>
                            <td>.p-dialog-enter-active</td>
                            <td>.p-dialog-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Drawer</i>
                            </td>
                            <td>.p-drawer-enter-active</td>
                            <td>.p-drawer-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Fieldset</i>
                            </td>
                            <td>.p-collapsible-enter-active</td>
                            <td>.p-collapsible-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Galleria</i>
                            </td>
                            <td>.p-galleria-enter-active</td>
                            <td>.p-galleria-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Image</i>
                            </td>
                            <td>.p-image-original-enter-active</td>
                            <td>.p-image-original-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Menu</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Message</i>
                            </td>
                            <td>.p-message-enter-active</td>
                            <td>.p-message-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Modal Masks</i>
                            </td>
                            <td>.p-overlay-mask-enter-active</td>
                            <td>.p-overlay-mask-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>MultiSelect</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Panel</i>
                            </td>
                            <td>.p-collapsible-enter-active</td>
                            <td>.p-collapsible-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>PanelMenu</i>
                            </td>
                            <td>.p-collapsible-enter-active</td>
                            <td>.p-collapsible-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Password</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Select</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Stepper</i>
                            </td>
                            <td>.p-collapsible-enter-active</td>
                            <td>.p-collapsible-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>TieredMenu</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>Toast</i>
                            </td>
                            <td>.p-toast-message-enter-active</td>
                            <td>.p-toast-message-leave-active</td>
                        </tr>
                        <tr>
                            <td>
                                <i>TreeSelect</i>
                            </td>
                            <td>.p-anchored-overlay-enter-active</td>
                            <td>.p-anchored-overlay-leave-active</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </app-docsectiontext>
    `
})
export class ReferenceDoc {}
